<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配置中心</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <script src="icon.js"></script>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <header class="header">
            <h2>配置界面</h2>
        </header>
        <main>
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div v-for="(v,k) in list" class="alert alert-success" :key="k.name" role="alert">
                            <h4 class="alert-heading" v-text="v.name"></h4>
                            <p>Aww yeah, you successfully read this important alert message. This example text is going
                                to run a bit
                                longer so that you can see how spacing within an alert works with this kind of content.
                            </p>
                            <hr>
                            <p class="mb-0">
                                <button class="btn btn-outline-dark" type="button">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#iconziyuan"></use>
                                    </svg>
                                </button>
                                <button class="btn btn-outline-dark" type="button">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#iconshanchu"></use>
                                    </svg>
                                </button>
                                <button class="btn btn-outline-dark" type="button">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icongengxin"></use>
                                    </svg>
                                </button>
                                <button class="btn btn-outline-dark" type="button">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icongengxinchenggong"></use>
                                    </svg>
                                </button>
                                <button class="btn btn-outline-dark" type="button">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#iconcuowu"></use>
                                    </svg>
                                </button>
                                <button class="btn btn-outline-dark" type="button">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#iconjinggao"></use>
                                    </svg>
                                </button>
                                <button class="btn btn-outline-dark" type="button">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#iconshuaxin"></use>
                                    </svg>
                                </button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </main>
    </div>


</body>

</html>